<template>
	<view class="tabbar">
		<u-tabbar :value="current?current:0" @change="tabbarChange" :fixed="true" :placeholder="true" :border="false"
			inactiveColor="rgba(0,0,0,0.6)" activeColor="#000000" zIndex="99999">
			<u-tabbar-item :text="item.text" v-for="(item,index) in tabBar" :key="index"
				badgeStyle="background-color: #CC242B" @click="switchClick(item)"
				:dot="index == 2 &&shopCartNumber > 0 ?true:false">
				<image class="image" slot="active-icon" :src="item.selectedIconPath"
					:style="{width:item.width,height:item.height}"></image>
				<image class="image" slot="inactive-icon" :src="item.iconPath"
					:style="{width:item.width,height:item.height}"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				tabBar: [{
					text: '首页',
					iconPath: '/static/images/tabbar/index.png', //未选中图标
					selectedIconPath: '/static/images/tabbar/index-active.png', //选中图片
					pagePath: "/pages/index/index", //页面路径
					badge: '',
					width: '40rpx',
					height: '40rpx'
				}, {
					text: '分类',
					iconPath: '/static/images/tabbar/category.png',
					selectedIconPath: '/static/images/tabbar/category-active.png',
					pagePath: "/pages/category/index",
					badge: '',
					width: '40rpx',
					height: '40rpx'
				}, {
					text: '购物车',
					iconPath: '/static/images/tabbar/shopCart.png',
					selectedIconPath: '/static/images/tabbar/shopCart-active.png',
					pagePath: "/pages/shopCart/index",
					badge: 0,
					width: '40rpx',
					height: '40rpx',
				}, {
					text: '我的',
					iconPath: '/static/images/tabbar/user.png',
					selectedIconPath: '/static/images/tabbar/user-active.png',
					pagePath: "/pages/user/index",
					badge: '',
					width: '40rpx',
					height: '40rpx'
				}],
				badgeStyles: {
					top: 0,
					right: '8px'
				}
			};
		},
		props: {
			current: Number,
		},
		computed: {
			...mapState({
				shopCartNumber: state => state.shopCart.shopCartNumber,
				isSettings: state => state.init.isSettings,
				subTemplateIds: state => state.init.subTemplateIds,
			})
		},
		mounted() {},
		methods: {
			tabbarChange(e) {
				this.$emit('tabbarChange')
			},
			switchClick(e) {
				this.pavilionChange(2, e.pagePath, 'switchTab')
			},
			// 订阅消息
			pavilionChange(type, params, jump_type = "navigateTo") {
				var _this = this
				// #ifdef APP-PLUS 
				_this.bannerJump(type, params)
				// #endif
				// #ifdef MP-WEIXIN
				if (!_this.isSettings) {
					uni.requestSubscribeMessage({
						tmplIds: _this.subTemplateIds,
						success(res) {
							_this.bannerJump(type, params, jump_type)
							_this.$store.commit('init/setSettings', true)
						},
						fail(err) {
							_this.$store.commit('init/setSettings', true)
							_this.bannerJump(type, params, jump_type)
							_this.$errorToast(err)
						}
					})
				} else {
					_this.bannerJump(type, params, jump_type)
				}
				// #endif
			},
			bannerJump(type, params, jump_type = "navigateTo") {
				if (type == 1) {
					if (this.bannerList[params].path) {
						var root_type = this.bannerList[params].root_type
						this['$' + root_type](this.bannerList[params].path)
					}
				} else {
					this['$' + jump_type](params)
				}
			},
		}
	};
</script>

<style lang="scss">
	// .tabars {
	// 	width: 170rpx;
	// 	height: 170rpx;
	// 	background-color: white;
	// 	position: relative;
	// 	bottom: 62rpx;
	// 	border-radius: 100rpx;
	// 	padding: 16rpx;

	.image {
		width: 38rpx !important;
		height: 38rpx !important;
	}

	// }
</style>